<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打卡</title>
<link href="/widget/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"  type="text/css"/>
<link href="/widget/iconfont/iconfont.css" rel="stylesheet" />
<link href="/res/css/inside_page.css" rel="stylesheet"  type="text/css"/>
{cssjs}
<script language="javascript" type="text/javascript" src="/widget/datepicker/WdatePicker.js"></script>
<style type="text/css">
   /* .nobd{border-right: none; border-top: none; border-bottom: none;}*/
   #attend_after1,#attend_after2,#attend_after3,#attend_after4{display: none;}
   .attendis1,.attendis2,.attendis3,.attendis4{display: none;}
</style>
</head>

<body>
<div class="container-fluid larry-wrapper">
    <div class="row">
        <div class="col-md-12">
            <section class="panel panel-padding">
                今日日期：{today}
            </section>
        </div>
        <!-- 上午上班打卡 -->
        <div class="col-md-3">
            <section class="panel panel-padding">
                <form id="form1" class="layui-form layui-form-pane">       
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="typename" value="上午上班打卡" type="text" readonly>
                            <input type="hidden" name="type" value="1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上班时间：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" placeholder="上班时间" name="am_on" value="{am_on}" id="am_on" type="text" readonly>
                        </div>
                    </div>
                    <div id="attend_before1">    
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input now nobd" name="now" value="" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注：</label>
                            <div class="layui-input-block">
                                <textarea name="remark_late_am" id="remark_late_am" placeholder="迟到请备注" class="layui-textarea" ></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item attendis1">
                            <div class="layui-input-block">
                                <input type="button" id="btn_save1" value="打卡" class="layui-btn" />
                            </div>
                        </div>
                    </div>
                    <div id="attend_after1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">打卡时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{attend_am_on}" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">迟到时长：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{late_am}分钟" type="text" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <!-- 上午下班打卡 -->
        <div class="col-md-3">
            <section class="panel panel-padding">
                <form id="form2" class="layui-form layui-form-pane">       
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="typename" value="上午下班打卡" type="text" readonly>
                            <input type="hidden" name="type" value="2">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">下班时间：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="am_off" value="{am_off}" id="am_off" type="text" readonly>
                        </div>
                    </div>
                    <div id="attend_before2"> 
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input now nobd" name="now" value="" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注：</label>
                            <div class="layui-input-block">
                                <textarea name="remark_early_am" id="remark_early_am" placeholder="早退请备注" class="layui-textarea" ></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item attendis2">
                            <div class="layui-input-block">
                                <input type="button" id="btn_save2" value="打卡" class="layui-btn" />
                            </div>
                        </div>
                    </div>
                    <div id="attend_after2">
                        <div class="layui-form-item">
                            <label class="layui-form-label">打卡时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{attend_am_off}" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">早退时长：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{early_am}分钟" type="text" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <!-- 下午上班打卡 -->
        <div class="col-md-3">
            <section class="panel panel-padding">
                <form id="form3" class="layui-form layui-form-pane">       
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="typename" value="下午上班打卡" type="text" readonly>
                            <input type="hidden" name="type" value="3">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上班时间：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="pm_on" value="{pm_on}" id="pm_on" type="text" readonly>
                        </div>
                    </div>
                    <div id="attend_before3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input now nobd" name="now" value="" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注：</label>
                            <div class="layui-input-block">
                                <textarea name="remark_late_pm" id="remark_late_pm" placeholder="迟到请备注" class="layui-textarea" ></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item attendis3">
                            <div class="layui-input-block">
                                <input type="button" id="btn_save3" value="打卡" class="layui-btn" />
                            </div>
                        </div>
                    </div>
                    <div id="attend_after3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">打卡时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{attend_pm_on}" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">迟到时长：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{late_pm}分钟" type="text" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <!-- 下午下班打卡 -->
        <div class="col-md-3">
            <section class="panel panel-padding">
                <form id="form4" class="layui-form layui-form-pane">       
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="typename" value="下午下班打卡" type="text" readonly>
                            <input type="hidden" name="type" value="4">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">下班时间：</label>
                        <div class="layui-input-block">
                            <input class="layui-input nobd" name="pm_off" value="{pm_off}" id="pm_off" type="text" readonly>
                        </div>
                    </div>
                    <div id="attend_before4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input now nobd" name="now" value=""  type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注：</label>
                            <div class="layui-input-block">
                                <textarea name="remark_early_pm" id="remark_early_pm" placeholder="早退请备注" class="layui-textarea" ></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item attendis4">
                            <div class="layui-input-block">
                                <input type="button" id="btn_save4" value="打卡" class="layui-btn" />
                            </div>
                        </div>
                    </div>
                    <div id="attend_after4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">打卡时间：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{attend_pm_off}" type="text" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">早退时长：</label>
                            <div class="layui-input-block">
                                <input class="layui-input nobd" value="{early_pm}分钟" type="text" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
     </div>
</div>
   {jsmodel}
   <script type="text/javascript">
        layui.use('attend_edit');      
        $(document).ready(function(){

            var attendis = '{attendis}';
            $('.attendis'+attendis).show();
            var attend_am_on='{attend_am_on}';
            var attend_am_off='{attend_am_off}';
            var attend_pm_on='{attend_pm_on}';
            var attend_pm_off='{attend_pm_off}';
            if(attend_am_on){$('#attend_after1').show();$('#attend_before1').hide();}
            if(attend_am_off){$('#attend_after2').show();$('#attend_before2').hide();}
            if(attend_pm_on){$('#attend_after3').show();$('#attend_before3').hide();}
            if(attend_pm_off){$('#attend_after4').show();$('#attend_before4').hide();}
            var t = null;
            t = setTimeout(time,0);//开始执行
            function time(){
               clearTimeout(t);//清除定时器
               dt = new Date();
               var h=dt.getHours();
               var m=dt.getMinutes();
               var s=dt.getSeconds();
               m=m<10?'0'+m:m;
               s=s<10?'0'+s:s;
               $(".now").val(h+":"+m+":"+s);
               t = setTimeout(time,1000); //设定定时器，循环执行             
            }         
        });
		
    </script>
</body>
</html>
